<template>
    <div>
        <!-- 显示image 物料 -->
        <div v-if="content.type=='image'" > 
            <div class="preview-image">
                <div class="el-image"  :style="'width:'+ medias.width+'px;' +'height:'+ medias.height+'px'">
                 <a :data-href="medias.linkurl" @click="openurl(medias)"
                    :title="medias.name"
                    :target="medias.target==2?'_self':'_blank'">
              <img  :src="content.image[0].url"
                    :alt="content.image[0].name" class="el-image__inner" />
                 </a>
                </div>
            </div>

        </div>
        <!-- 显示txt类型文本 -->
        <div v-if="content.type=='txt'">
          <div class="el-image" >
                 <a :data-href="medias.linkurl" @click="openurl(medias)"
                    :title="medias.name"
                    :target="medias.target==2?'_self':'_blank'">
                <p :style="content.style" @mouseover="onMouseOver(content.activeStyle)">{{content.txt}}</p>
                 </a>
          </div>
        </div>
             <!-- 显示image 物料 -->
        <div v-if="content.type=='video'" > 
            <div class="preview-video">
                <div class="el-image">
                  
                    <video autoplay="true"  controls
                     :width="medias.width" :height="medias.height">
                            <source :src="content.video" />
                    </video>
                </div>
            </div>

        </div>
        <!-- 如果是富媒体 <HTML></HTML> -->
        <div v-if="content.type=='html'" > 
            <div v-if="medias.cntype==1" class="preview-html">
                <div v-html="content.html">  </div>
            </div>
            <!-- 富媒体的浮窗广告类型2 -->
            <div v-if="medias.cntype==2" > 
                        <div class="preview-image">
                            <div class="el-image"  :style="'width:'+ content.winWidth+'px;' +'height:'+ content.winHeight+'px'">
                            <a :data-href="medias.linkurl" @click="openurl(medias)" 
                                href="javascript:void(0)"                             
                                :target="medias.target==2?'_self':'_blank'">
                                  <!-- :title="medias.name" -->
                        <img  :src="content.adpic"
                                :alt="medias.name" class="el-image__inner" />
                            </a>
                            </div>
                        </div>

                    </div>
        </div>
        <!-- 信息流 stream 的广告预览 -->
        <div v-if="content.type=='stream'" > 
            <div class="preview-stream">
                 <a :data-href="medias.linkurl" @click="openurl(medias)"
                    :title="medias.name"
                    :target="medias.target==2?'_self':'_blank'">
                <stream-view-san :cntype="content.cntype" :cnrow="content"></stream-view-san>
                </a>
            </div>

        </div>
        <!-- 显示flash -->
        <div v-if="content.type=='flash'" style="position:relative;" > 
            <div style="positon: absolute; left:0; top:0;width:100%; height:100%;visibility: visible; z-index: 999;"  :data-href="medias.linkurl" @click="openurl(medias)">
            <iframe id="iframe1" src="about:blank" frameBorder="0" marginHeight="0" marginWidth="0"
              style="position:absolute; visibility:inherit; top:0px;left:0px;width:100%; height:100%;z-index:1; filter:alpha(opacity=0);">
              </iframe> 

            <object classid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628" id="flashAd" 
             :width="medias.width" :height="medias.height" style="z-index:-1">           
            <param name="data" :value="content.flash" />
            <param name="menu" value="false"/>
            <param name="wmode" value="transparent"> 
             <embed id="forfunex" :src="content.flash"
                       :width="medias.width" :height="medias.height"                        
                        align="middle" 
                        bgcolor="#ffffff"                     
                        play="true"
                        loop="true"
                        FlashVars=""
                        wmode="transparent"
                        allowScriptAccess="sameDomain"
                        type="application/x-shockwave-flash"
                        pluginspage="http://www.adobe.com/go/getflashplayer"/>
                  </embed>                   
            </object>
             
            </div>
        </div>
<!--  -->
    </div>
</template>

<script>
import StreamViewSan from '../Place/StreamViewSan.vue';
import PlaceAPI from  '../Place/PlaceAPI.js';

export default {
    components: {StreamViewSan },
    //props: ['mediasId','trackerclick'],
    props:{
        mediasId:{
            type: undefined, default:0
        },
        trackerclick:{
            type: Function, default:()=>{}
        }
    },
    data() {  
        return {
            medias: undefined,
             
        }
    },
    computed:{
        content(){
            if( this.medias && this.medias.hasOwnProperty('content')){
                //var c = this.medias['content'].replace(/[\r|\n]/g,'') ;
                //console.log(c)
                return   this.medias['content'];
            }
            return {}
        }
    },
    created() {
        this.getMedias();
    },
    methods:{
        getMedias(){
            PlaceAPI.getMedias( this.mediasId).then( data =>{
                 this.medias = data;
                 this.$emit("initstyle", data)
            })
        },
        onMouseOver( activeStyle){
            
        },
        //打开页面链接
        openurl(medias){
           // console.log(this.trackerclick)
           /**调用 parent组件传进来的触发统计 点击交互的跟踪 */
            this.trackerclick();
             
            //this.$emit("onclickmedias", medias);
            if(!medias.linkurl){
                return;
            }
            var parent  =  window.parent || window;
            // console.log(parent)
            if(medias.target ==2){
                parent.location.href = medias.linkurl;
            }else{
                window.open(medias.linkurl)
            }
              
        },
    }
}
</script>
